<script lang="ts" setup>
import { MdPreview } from 'md-editor-v3'

type Props = {
  data: string
  previewTheme?: 'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
  codeTheme?:
    | 'atom'
    | 'a11y'
    | 'github'
    | 'gradient'
    | 'kimbie'
    | 'paraiso'
    | 'qtcreator'
    | 'stackoverflow'
}

const { data, previewTheme } = defineProps<Props>()

const themeStore = useThemeStoreHook()
</script>

<template>
  <MdPreview
    :modelValue="data"
    :previewTheme="previewTheme"
    :theme="themeStore.themeType as any"
    codeTheme="codeTheme"
  />
</template>

<style scoped></style>
